/*
 * @Description: 添加档案鉴定管理弹窗组件
 * @Author: Rfan
 * @Date: 2022-07-29 16:18:02
 * @LastEditTime: 2022-07-29 19:22:52
 */

import { useEffect } from 'react';
import { Button, Checkbox, Form, Input, Modal, Select, Space, Typography } from 'antd';
import classNames from 'classnames/bind';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';
import style from '../../styles/appraisalingDialog.module.scss';

const cx = classNames.bind(style);

interface AddDialogProps extends ICommonDialog {}

const AppraisalingDialog: FC<AddDialogProps> = (props) => {
  const { visible, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  const submitFunc = () => {
    form.submit();
  };

  const onFinish = (values: any) => {
    onCancel();
  };

  const onCancel = () => {
    onClose();
  };

  const onFormValueChanged = (changedValues: any) => {
    const resultVal = changedValues.result;
    // 选择销毁档案时清除其它选项
    if (resultVal && resultVal.indexOf(1) >= 0) {
      form.setFieldsValue({ result: [1] });
    }
  };

  return (
    <Modal
      destroyOnClose
      title="新建鉴定批次"
      visible={visible}
      width={600}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={submitFunc}>
          确定
        </Button>
      ]}
    >
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        preserve={false}
        onValuesChange={onFormValueChanged}
        onFinish={onFinish}
      >
        <Form.Item label="鉴定档案">2021年国有经济企业单位人才资原统计报表</Form.Item>
        <Form.Item label="鉴定类型">价值鉴定</Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.result !== currentValues.result}
        >
          {({ getFieldValue, setFieldsValue }) => {
            const resultVal = new Set(getFieldValue('result'));
            return (
              <Form.Item name="result" label="鉴定结果" required>
                <Checkbox.Group>
                  <Space direction="vertical">
                    <Checkbox value={1}>销毁档案</Checkbox>
                    <div className={cx('result-item')}>
                      <Checkbox value={2} disabled={resultVal.has(1)}>
                        重新划定<Typography.Text strong>保管期限</Typography.Text>为
                      </Checkbox>
                      <span className={cx('input-wrap')}>
                        <Input disabled={resultVal.has(1)} /> 年
                      </span>
                    </div>
                    <div className={cx('result-item')}>
                      <Checkbox value={3} disabled={resultVal.has(1)}>
                        调整<Typography.Text strong>档案内部保存期限</Typography.Text>至
                      </Checkbox>
                      <span className={cx('input-wrap')}>
                        <Input disabled={resultVal.has(1)} /> 年
                      </span>
                    </div>
                    <div className={cx('result-item')}>
                      <Checkbox value={4} disabled={resultVal.has(1)}>
                        调整<Typography.Text strong>开放划控</Typography.Text>至
                      </Checkbox>
                      <span className={cx('input-wrap')}>
                        <Select disabled={resultVal.has(1)}></Select>
                      </span>
                    </div>
                  </Space>
                </Checkbox.Group>
              </Form.Item>
            );
          }}
        </Form.Item>
        <Form.Item name="remark" label="鉴定意见" extra="如果不同文件鉴定意见不同，请单独处理">
          <Input.TextArea placeholder="备注信息描述，最多可填写2000字" maxLength={2000} showCount />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AppraisalingDialog;
